<template>
  <div>
    <div class="top w">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>全部商品</el-breadcrumb-item>
        <el-breadcrumb-item>分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 商品名称 -->
    <nav>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        class="w"
      >
        <el-tab-pane label="分类" disabled></el-tab-pane>
        <el-tab-pane label="全部" name="second" class="w">
          <div class="hhh">
            <ul>
              <li
                v-for="item in par"
                :key="item.id"
                @click="
                  $router.push(`/goods/details?productID=${item.product_id}`)
                "
              >
                <img
                  :src="`http://101.132.181.9/api/${item.product_picture}`"
                  alt=""
                />
                <h2>{{ item.product_name }}</h2>
                <h3>{{ item.product_title }}</h3>
                <p>
                  <span>{{ item.product_selling_price }}元</span>
                  <span class="del">{{ item.product_price }}元</span>
                </p>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane
          :label="item.category_name"
          :name="item.category_name"
          v-for="(item, index) in all"
          :key="index"
          class="we w"
        >
          <div class="hhh">
            <ul>
              <li v-for="(item, index) in par" :key="index">
                <img
                  :src="`http://101.132.181.9/api/${item.product_picture}`"
                  alt=""
                />
                <h2>{{ item.product_name }}</h2>
                <h3>{{ item.product_title }}</h3>
                <p>
                  <span>{{ item.product_selling_price }}元</span>
                  <span class="del">{{ item.product_price }}元</span>
                </p>
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-pagination
        class="w"
        @current-change="handleCurrentChange"
        :current-page="queryModel.currentPage"
        layout="prev, pager, next"
        :page-size="queryModel.pageSize"
        :total="total"
      >
      </el-pagination>
    </nav>
  </div>
</template>

<script>
import { getList, getParams, getFilter, goSearchList } from "@/api/user";
export default {
  data() {
    return {
      queryModel: {
        categoryID: [1],
        currentPage: 1,
        pageSize: 15,
      },
      total: 0,
      all: [],
      par: [],
      alllist: [],
      filterlist: [],
      activeName: "second",
    };
  },
  created() {
    this.getlistName();
    this.getparams();
  },
  methods: {
    // handleSizeChange(val) {
    //   this.pageSize = val;
    //   this.getparams();
    // },
    async goSearch(val) {
      this.par = [];
      const {
        data: { Product },
      } = await goSearchList({
        currentPage: 1,
        pageSize: 15,
        search: val,
      });
      this.par = Product;
    },
    handleCurrentChange(val) {
      this.queryModel.currentPage = val;
      this.getparams();
    },
    //点击tab栏
    async handleClick(e) {
      this.$router.push("/goods");
      // console.log(e.index);
      //判断下标等于1的时候，商品所有的数据=等于所有的数据
      if (e.index == 1) {
        this.par = this.alllist;
      }
      if (e.index > 1) {
        this.queryModel.categoryID = [e.index - 1];
        //过滤的数据
        await this.getFilterlist();
        this.par = this.filterlist;
      }
    },
    //筛选数据
    async getFilterlist() {
      const res = await getFilter(this.queryModel);
      // console.log(res.data);
      this.filterlist = res.data.Product;
    },
    //获取商品数据
    async getparams() {
      const { data } = await getParams(this.queryModel);
      this.total = data.total;
      console.log(data);
      this.par = data.Product;
      this.alllist = data.Product;
    },
    //获取全部商品名称
    async getlistName() {
      const res = await getList();
      //   console.log(res.data);
      this.all = res.data.category;
    },
  },
  watch: {
    $route: {
      handler(val) {
        if (val.query) {
          this.goSearch(val.query.search);
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style scoped lang="scss">
.top {
  height: 70px;
  width: 100%;
  line-height: 70px;
  background: #fff !important;
  .el-breadcrumb {
    line-height: 70px;
    margin-left: 180px;
  }
}
.el-tabs__header {
  background: #fff;
}
.hhh {
  background-color: #f5f5f5;
  margin-top: 20px;
  ul {
    width: 100%;
    float: right;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: #f5f5f5;
    // justify-content: space-around;
    li {
      background: #fff;
      width: 234px;
      height: 300px;
      margin-top: 10px;
      margin-left: 5px;
      transition: all 0.2s linear;
      img {
        width: 160px;
        height: 160px;
        margin: 0 0 0 25px;
      }
      a {
        display: block;
        text-align: center;
        line-height: 258px;
      }
      h2 {
        margin: 25px 10px 0;
        font-size: 14px;
        color: #333;
      }
      h3 {
        margin: 5px 10px;
        height: 18px;
        font-size: 12px;
        color: #b0b0b0;
      }
      p {
        margin: 10px 10px 10px;
        text-align: center;
        color: #ff6700;
      }
      .del {
        margin-left: 0.5em;
        color: #b0b0b0;
        text-decoration: line-through;
      }
      h2,
      h3 {
        font-weight: 400;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
    li:hover {
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }
  }
}
</style>
